<template>
  <div class="demand-card">
    <a-card :style="{ width: '360px' }" hoverable>
      <div class="content">
        <div class="content-left">
          <div class="content-left-title">
            <icon-settings />{{ cloneProps.tempName }}
          </div>
          <div class="content-left-sub-title">
            <icon-file />
            {{
              cloneProps.design === null
                ? cloneProps.name
                : cloneProps.design.name
            }}
          </div>
        </div>
        <div class="content-right">
          <div class="content-right-creator"
            >创建人：{{ cloneProps.userName }}</div
          >
          <div class="content-right-time"
            >创建时间：{{
              `${dayjs(cloneProps.createdAt).format('YYYY-MM-DD')}`
            }}</div
          >
        </div>
      </div>
      <div class="content-middle">
        <div class="content-middle-operater">
          <span class="status">启用状态</span>
          <a-switch
            v-model="cloneProps.state"
            :checked-value="1"
            :unchecked-value="2"
            @change="statusUpdate(cloneProps)"
          >
            <template #checked> 开 </template>
            <template #unchecked> 关 </template>
          </a-switch>
          <!--  :default-checked="status" -->
        </div>
      </div>
      <div class="operater">
        <span class="item" @click="edit">编辑</span>
        <!-- <span class="item">复制</span> -->
        <a-popconfirm content="确定删除吗?" @ok="delCard(cloneProps.id)">
          <span class="item">删除</span>
        </a-popconfirm>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch, computed } from 'vue';
  import clonedeep from 'lodash.clonedeep';
  import dayjs from 'dayjs';

  const props = withDefaults(
    defineProps<{
      form: any; // 传进来的参数
    }>(),
    {}
  );

  const cloneProps = computed(() => {
    return clonedeep(props.form);
  });
  const emits = defineEmits(['del', 'statusChange', 'goDemandCreate']);

  // 删除模板
  const delCard = (id: number): void => {
    emits('del', id);
  };
  // 修改启用状态
  const statusUpdate = (form: any) => {
    emits('statusChange', form);
  };
  const edit = () => {
    let params = { id: cloneProps.value.id };
    emits('goDemandCreate', params);
  };
  defineExpose({ cloneProps });
</script>

<style lang="less" scoped>
  .demand-card {
    margin: 16px;

    .content {
      padding-bottom: 16px;
      // border-bottom: 1px solid #eee;
      display: flex;

      &-left {
        flex: 1;

        &-title {
          font-size: 16px;
        }

        &-sub-title {
          font-size: 12px;
          color: #999;
          margin: 16px 0;
        }

        &-sub-title:hover {
          color: rgba(61, 126, 255, 1);
          cursor: pointer;
        }
      }

      &-right {
        font-size: 12px;
        color: #999;
        margin-left: 16px;

        &-creator {
        }

        &-time {
          margin: 16px 0;
        }
      }
    }

    .content-middle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 16px;
      border-bottom: 1px solid #eee;

      .status {
        margin-right: 10px;
      }
    }

    .operater {
      margin-top: 16px;

      .item {
        margin: 0 10px;
        cursor: pointer;
      }
    }
  }
</style>
